<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
    .line{
      color: rebeccapurple;
    }
  </style>
</head>
<body>
  <div id="hello">
    <!--语法糖的写法-->
    <img :src="imgURL">
    <a :href="aHERF"></a>

    <h1 v-bind:class="{ active: isActive, line: isLine}">{{message}}</h1>
    <h1 v-bind:class="getClasses()">{{message}}</h1>
    <button v-on:click="btnClick">按钮</button>
  </div>

  <script>
    const hello = new Vue({
      el: '#hello',
      data: {
        message: 'aa',
        imgURL : 'https://img-blog.csdnimg.cn/20190506093137378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05hdHVyYWxfQW50,size_16,color_FFFFFF,t_70',
        aHERF: 'http://www.baidu.com',
        //v-bind指令会解析链接，如果不加v-bind会导致无法转到正确网页链接
        isActive: true,
        isLine: false
      },
      methods: {
        btnClick: function() {
          this.isActive = !this.isActive;
        },
        getClasses: function () {
          return { active: this.isActive, line: this.isLine}
        }
    })
  </script>

</body>
</html>